<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>艾比摄像机数据监控</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: "Segoe UI", "PingFang SC", sans-serif; margin: 24px; }
        h1 { font-size: 24px; margin-bottom: 16px; }
        section { margin-bottom: 32px; }
        label { display: inline-block; margin-bottom: 8px; font-weight: bold; }
        input[type="text"] { width: 320px; padding: 6px; }
        button { padding: 6px 14px; margin-right: 8px; cursor: pointer; }
        table { border-collapse: collapse; width: 100%; margin-top: 12px; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
        th { background-color: #f6f6f6; }
        .hint { color: #888; font-size: 12px; }
        pre { background: #f7f7f7; padding: 12px; overflow-x: auto; }
    </style>
</head>
<body>
<h1>艾比摄像机数据监控</h1>

<section>
    <label for="token">授权 Token（例如：Bearer xxx）</label><br>
    <input id="token" type="text" placeholder="请输入接口调用时使用的 Authorization 值">
    <span class="hint">若已登录 Swagger，可从浏览器请求头复制 Authorization。</span>
</section>

<section>
    <h2>实时状态</h2>
    <button onclick="loadStatus()">刷新状态</button>
    <div id="statusContainer"></div>
</section>

<section>
    <h2>排队数据查询</h2>
    <div>
        <label for="pageNum">页码</label>
        <input id="pageNum" type="number" value="1" min="1" style="width: 80px;">
        <label for="pageSize">每页数量</label>
        <input id="pageSize" type="number" value="20" min="1" max="100" style="width: 80px;">
        <button onclick="loadCarQueue()">查询</button>
    </div>
    <div id="queueContainer"></div>
</section>

<script>
    function getHeaders() {
        const token = document.getElementById('token').value.trim();
        const headers = { 'Content-Type': 'application/json;charset=UTF-8' };
        if (token) {
            headers['Authorization'] = token;
        }
        return headers;
    }

    function loadStatus() {
        fetch('/traffic/aibi/status/latest', {
            method: 'GET',
            headers: getHeaders()
        }).then(res => res.json())
            .then(renderStatus)
            .catch(err => alert('查询失败：' + err));
    }

    function renderStatus(res) {
        if (!res.ok) {
            document.getElementById('statusContainer').innerHTML = '<p>查询失败：' + res.msg + '</p>';
            return;
        }
        const data = res.data || [];
        if (data.length === 0) {
            document.getElementById('statusContainer').innerHTML = '<p>暂无数据</p>';
            return;
        }
        let html = '<table><thead><tr>' +
            '<th>摄像机编号</th><th>道路编号</th><th>设备编号</th>' +
            '<th>左转排队</th><th>直行排队</th><th>比值</th>' +
            '<th>当前模式</th><th>最近采集时间</th><th>最近指令时间</th><th>最近指令状态</th>' +
            '</tr></thead><tbody>';
        data.forEach(item => {
            html += '<tr>' +
                `<td>${item.cameraCode || '-'}</td>` +
                `<td>${item.roadCode || '-'}</td>` +
                `<td>${item.deviceId || '-'}</td>` +
                `<td>${item.leftQueueLength ?? '-'}</td>` +
                `<td>${item.straightQueueLength ?? '-'}</td>` +
                `<td>${formatRatio(item.ratio)}</td>` +
                `<td>${item.currentMode || '-'}</td>` +
                `<td>${formatDate(item.lastSampleTime)}</td>` +
                `<td>${formatDate(item.lastSwitchTime)}</td>` +
                `<td>${item.lastCommandStatus || '-'} ${item.lastCommandMessage ? '(' + item.lastCommandMessage + ')' : ''}</td>` +
                '</tr>';
        });
        html += '</tbody></table>';
        document.getElementById('statusContainer').innerHTML = html;
    }

    function loadCarQueue() {
        const pageNum = parseInt(document.getElementById('pageNum').value, 10) || 1;
        const pageSize = parseInt(document.getElementById('pageSize').value, 10) || 20;
        const body = JSON.stringify({
            pageNum, pageSize,
            roadCode: '',
            cameraCode: '',
            laneCode: ''
        });
        fetch('/traffic/aibi/car-queue/query', {
            method: 'POST',
            headers: getHeaders(),
            body
        }).then(res => res.json())
            .then(renderQueue)
            .catch(err => alert('查询失败：' + err));
    }

    function renderQueue(res) {
        if (!res.ok) {
            document.getElementById('queueContainer').innerHTML = '<p>查询失败：' + res.msg + '</p>';
            return;
        }
        const page = res.data || {};
        const records = page.list || page.records || [];
        if (records.length === 0) {
            document.getElementById('queueContainer').innerHTML = '<p>暂无数据</p>';
            return;
        }
        let html = '<table><thead><tr>' +
            '<th>ID</th><th>道路编号</th><th>摄像机编号</th><th>车道编码</th>' +
            '<th>车道类型</th><th>排队长度</th><th>车辆总数</th>' +
            '<th>采集时间</th><th>开始时间</th><th>结束时间</th>' +
            '</tr></thead><tbody>';
        records.forEach(item => {
            html += '<tr>' +
                `<td>${item.id}</td>` +
                `<td>${item.roadCode || '-'}</td>` +
                `<td>${item.cameraCode || '-'}</td>` +
                `<td>${item.laneCode || '-'}</td>` +
                `<td>${item.laneType || '-'}</td>` +
                `<td>${item.queueLength ?? '-'}</td>` +
                `<td>${item.vehicleCount ?? '-'}</td>` +
                `<td>${formatDate(item.sampleTime)}</td>` +
                `<td>${formatDate(item.startTime)}</td>` +
                `<td>${formatDate(item.endTime)}</td>` +
                '</tr>';
        });
        html += '</tbody></table>';
        document.getElementById('queueContainer').innerHTML = html;
    }

    function formatDate(value) {
        if (!value) {
            return '-';
        }
        if (typeof value === 'string') {
            return value.replace('T', ' ');
        }
        return value;
    }

    function formatRatio(value) {
        if (value === null || value === undefined) {
            return '-';
        }
        if (!isFinite(value)) {
            return '∞';
        }
        return value.toFixed(2);
    }
</script>
</body>
</html>

